<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue2 + Element UI CRUD 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-button @click="showAddDialog" type="primary">添加用户</el-button>

    <el-table :data="users" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="editUser()" size="small" type="warning">编辑</el-button>
                <el-button @click="deleteUser(scope.row)" size="small" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="用户信息">
        <el-form :model="currentUser">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="currentUser.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="currentUser.age"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUser">确 定</el-button>
            </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                users: [
                    {
                        name: '陈国盛',
                        age: 1
                    }
                ], // 用户列表
                dialogVisible: false,
                currentUser: {name: '', age: ''},
                formLabelWidth: '80px',
            };
        },
        methods: {
            showAddDialog() {
                this.currentUser = {name: '', age: ''};
                this.dialogVisible = true;
            },
            editUser() {
                this.dialogVisible = true;
            },
            deleteUser(user) {
               alert('删除成功')
            },
            // 保存用户（添加或编辑）
            saveUser() {
              alert('保存成功')

            }
        }
    });
</script>
</body>
</html>
